<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合案例</title>
    <script src="../js/vue.js"></script>
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
</head>
<body>
<!--1. 准备一个容器-->
<div id="app">
    <!--顶部操作-->
    <el-row type="flex" justify="left">
        <el-col :span="4">
            <!--顶部添加按钮-->
            <el-button  type="primary" icon="el-icon-plus" @click="flag = true" >添加</el-button>
            <!--添加弹出表单-->
            <el-dialog :visible.sync="flag" title="添加用户信息" @close="resetData">

                <el-form
                    v-bind:model="addUserList"
                    v-bind:rules="ruleReg"
                    ref="formData"
                >
                    <!--用户名-->
                    <el-form-item label="用户名" label-width="70px"  prop="username">
                        <el-input name="username"  type="text" prefix-icon="el-icon-user" placeholder="请输入用户名" v-model="addUserList.username"></el-input>
                    </el-form-item>

                    <!--性别-->
                    <el-form-item label="性别" label-width="70px">
                        <el-radio-group name="sex" v-model="addUserList.sex">
                            <el-radio label="1">男</el-radio>
                            <el-radio label="0">女</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <!--生日-->
                    <el-form-item label="生日" label-width="70px">
                        <el-date-picker name="birthday" placeholder="请选择生日" v-model="addUserList.birthday"></el-date-picker>
                    </el-form-item>

                    <!--电话-->
                    <el-form-item label="电话" label-width="70px"  prop="tel" >
                        <el-input name="tel" type="text" prefix-icon="el-icon-mobile-phone" placeholder="请输入电话" v-model="addUserList.tel" prop="tel"></el-input>
                    </el-form-item>

                    <!--职业-->
                    <el-form-item label="职业" label-width="70px">
                        <el-select name="profession" v-model="addUserList.profession">
                            <el-option label="程序猿" value="1"></el-option>
                            <el-option label="攻城狮" value="2"></el-option>
                            <el-option label="码农" value="3"></el-option>
                        </el-select>
                    </el-form-item>

                    <!--工资-->
                    <el-form-item label="工资" label-width="70px" prop="sal">
                        <el-input name="sal" type="text" prefix-icon="el-icon-money" placeholder="请输入工资" v-model="addUserList.sal"></el-input>
                    </el-form-item>

                    <!--地址-->
                    <el-form-item label="地址" label-width="70px" prop="address">
                        <el-input name="address" type="text" prefix-icon="el-icon-location" placeholder="请输入地址" v-model="addUserList.address"></el-input>
                    </el-form-item>

                    <!--备注-->
                    <el-form-item label="备注" label-width="70px">
                        <el-input name="remark" type="text" prefix-icon="el-icon-edit" placeholder="请输入备注" v-model="addUserList.remark"></el-input>
                    </el-form-item>

                    <!--确认 取消按钮-->
                    <el-form-item>
                        <el-row type="flex" justify="center">
                            <el-col :span="4">
                                <el-button type="success" prefix-icon="el-icon-check" @click="submitUser">确认</el-button>
                            </el-col>
                            <el-col :span="4">
                                <el-button type="danger" prefix-icon="el-icon-close" @click="resetData">取消</el-button>
                            </el-col>
                        </el-row>
                    </el-form-item>

                </el-form>



            </el-dialog>

            <!--编辑弹出表单-->
            <el-dialog :visible.sync="flag1" title="添加用户信息" @close="resetData1">

                <el-form
                        v-bind:model="editUserList"
                        v-bind:rules="ruleReg"
                        ref="formData1"
                >
                    <!--用户名-->
                    <el-form-item label="用户名" label-width="70px"  prop="username">
                        <el-input name="username"  type="text" prefix-icon="el-icon-user" placeholder="请输入用户名" v-model="editUserList.username"></el-input>
                    </el-form-item>

                    <!--性别-->
                    <el-form-item label="性别" label-width="70px">
                        <el-radio-group name="sex" v-model="editUserList.sex">
                            <el-radio label="1">男</el-radio>
                            <el-radio label="0">女</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <!--生日-->
                    <el-form-item label="生日" label-width="70px">
                        <el-date-picker name="birthday" placeholder="请选择生日" v-model="editUserList.birthday"></el-date-picker>
                    </el-form-item>

                    <!--电话-->
                    <el-form-item label="电话" label-width="70px"  prop="tel" >
                        <el-input name="tel" type="text" prefix-icon="el-icon-mobile-phone" placeholder="请输入电话" v-model="editUserList.tel" prop="tel"></el-input>
                    </el-form-item>

                    <!--职业-->
                    <el-form-item label="职业" label-width="70px">
                        <el-select name="profession" v-model="editUserList.profession">
                            <el-option label="程序猿" value="1"></el-option>
                            <el-option label="攻城狮" value="2"></el-option>
                            <el-option label="码农" value="3"></el-option>
                        </el-select>
                    </el-form-item>

                    <!--工资-->
                    <el-form-item label="工资" label-width="70px" prop="sal">
                        <el-input name="sal" type="text" prefix-icon="el-icon-money" placeholder="请输入工资" v-model="editUserList.sal"></el-input>
                    </el-form-item>

                    <!--地址-->
                    <el-form-item label="地址" label-width="70px" prop="address">
                        <el-input name="address" type="text" prefix-icon="el-icon-location" placeholder="请输入地址" v-model="editUserList.address"></el-input>
                    </el-form-item>

                    <!--备注-->
                    <el-form-item label="备注" label-width="70px">
                        <el-input name="remark" type="text" prefix-icon="el-icon-edit" placeholder="请输入备注" v-model="editUserList.remark"></el-input>
                    </el-form-item>

                    <!--确认 取消按钮-->
                    <el-form-item>
                        <el-row type="flex" justify="center">
                            <el-col :span="4">
                                <el-button type="success" prefix-icon="el-icon-check" @click="submitEdit">确认</el-button>
                            </el-col>
                            <el-col :span="4">
                                <el-button type="danger" prefix-icon="el-icon-close" @click="resetData1">取消</el-button>
                            </el-col>
                        </el-row>
                    </el-form-item>

                </el-form>

            </el-dialog>

            <!--顶部批量删除按钮-->
            <el-button  type="danger" icon="el-icon-delete" @click="multiplyDelete">批量删除</el-button>
        </el-col>
        <!--搜索功能-->
        <el-col :span="4" type="flex" justify="left">
            <el-input type="text" v-model="selectData" placeholder="请输入要查询的关键字">
                <el-select v-model="selectType" slot="prepend">
                    <el-option label="编号" value="1"></el-option>
                    <el-option label="姓名" value="2"></el-option>
                    <el-option label="地址" value="3"></el-option>
                </el-select>

                <el-button type="info" slot="append" icon="el-icon-search" @click="selectUser" >搜索</el-button>
            </el-input>
        </el-col>
    </el-row>

    <!--整体表格-->
    <!--绑定选择按钮-->
    <el-table v-bind:data="userList"
              @select-all="selectAll"
              @select="selectOne"
    >

        <el-table-column  type="selection" align="center"></el-table-column>
        <el-table-column label="序号"  type="index" align="center"></el-table-column>
        <el-table-column label="主键"  prop="id" align="center"></el-table-column>
        <el-table-column label="姓名"  prop="username" align="center"></el-table-column>
        <el-table-column label="性别"  prop="sex" align="center" :formatter="sexFormatter"></el-table-column>
        <el-table-column label="生日"  prop="birthday" align="center"></el-table-column>
        <el-table-column label="手机"  prop="tel" align="center"></el-table-column>
        <el-table-column label="职业"  prop="profession" align="center" :formatter="professionFormatter"></el-table-column>
        <el-table-column label="薪资"  prop="sal" align="center"></el-table-column>
        <el-table-column label="地址"  prop="address" align="center"></el-table-column>
        <el-table-column label="备注"  prop="remark" align="center"></el-table-column>
        <!--添加按钮-->
        <el-table-column label="操作" width="240px" align="center">
           <div slot-scope="scope">
               <el-button type="danger" icon="el-icon-delete" @click="deleteUser(scope.row)">删除</el-button>
               <el-button type="warning" icon="el-icon-edit" @click="editUser(scope.row)">编辑</el-button>
           </div>
        </el-table-column>
    </el-table>

    <!--分页组件绑定相关数据-->
    <el-pagination
        v-bind:total="total"
        v-bind:page-size="pageSize"
        v-bind:page-sizes="pageSizes"
        v-bind:current-page="pageNum"
        layout="total,prev,pager,next,jumper,sizes"
        @current-change="mth1"
        @size-change="mth2"
    >

    </el-pagination>

</div>
<script src="../js/综合案例.js"></script>

</body>
</html>